<template>
    <div class="register-wrapper">
        <IHeader class="header" back="true" title="注册"></IHeader>
        <div class="flex_center">
            <div class="form-wrapper">
                <div class="flex_row space_between tel-wrapper">
                    <div class="border-bottom" style="width: 68px;">
                        <input class="write code" type="text" value="+86">
                    </div>
                    <div class="border-bottom" style="width: 522px;">
                        <input class="write tel" autofocus="true" v-model="telphone" type="tel" maxlength="11" placeholder="请输入手机号码" @blur="checkTelphone">
                    </div>
                </div>
                <Tip v-if="checkPhone.length > 0" class="word_left" :word="checkPhone"></Tip>
                <div class="border-bottom flex_row space_between checkCode-wrapper">
                    <div style="width: 240px">
                        <input class="write tel" v-model="checkcode" type="tel" maxlength="4" placeholder="请输入验证码">
                    </div>
                    <text class="getCode" :class="[counting ? 'notPress' : '']" @click="sendCheckCode">{{counting ? counts + '秒后重发' : '获取验证码'}}</text>
                </div>
                <Tip v-if="checkWord.length > 0" class="word_left" :word="checkWord"></Tip>
                <div class="border-bottom password-wrapper">
                    <input class="write tel" v-model="password" :type="passwordType" maxlength="16" placeholder="请设置密码（6-16位英文或数字）" @blur="checkPassword">
                    <image class="eye" :src="imgPath(eyeSrc)" @click="changePassword"></image>
                </div>
                <Tip v-if="checkpassword.length > 0" class="word_left" :word="checkpassword"></Tip>
                <text @touchstart="tStart" @touchend="tEnd" class="submitBtn" :class="[ifPress ? 'afterPress' : 'beforePress']" @click="handleRegister">注&nbsp;册</text>
            </div>
        </div>
        <div class="register-success" v-if="dialogShow">
            <image class="success-bg" :src="imgPath('register_bg.png')"></image>
            <div class="success-content">
                <div class="avatar-wrapper">
                    <image class="avatar" :src="imgPath('register_avatar.png')"></image>
                    <image class="close" :src="imgPath('dialog_close.png')" @click="hideDialog"></image>
                </div>
                <text class="success-tel margin_top_20">{{telphone}}</text>
                <text class="success-tip margin_top_20">注册成功</text>
                <text class="success-welcome margin_top_20">欢迎来到泳衣库</text>
                <text class="success-welcome">快来资质认证，开启商家之旅吧！</text>
                <div class="btn-wrapper">
                    <text class="btn goNow beforePress" @click="jumpTo('/settle')">现在就去</text>
                    <text class="btn margin_top_20 later" @click="jumpTo('/home')">以后再说</text>
                </div>
            </div>
        </div>
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import { WxcLoading } from 'weex-ui'
import IHeader from '@/components/header'
import Tip from '@/components/tip'
import Buttons from '@/components/buttons'
import { isvalidatemobile, validatePassword, validatenull } from '@/util/validate'
import { userRegister, userCheckCode, userLogin } from '@/api/user'
const modal = weex.requireModule('modal')
const storage = weex.requireModule('storage')

export default {
  name: 'register',
  data () {
    return {
      needMask: true, // 蒙版
      telphone: '', // 用户手机号
      password: '', // 用户密码
      checkcode: '', // 验证码
      passwordType: 'password',
      checkPhone: '', // 手机号验证
      checkpassword: '', // 密码验证
      checkWord: '', // 验证码验证
      counting: false, // 是否计时中
      counts: 60, // 倒计时秒
      timer: null, // 计时器
      loadingShow: false, // loading显示
      eyeSrc: 'eye_hide.png',
      ifPress: false,
      dialogShow: false // 注册成功弹窗
    }
  },
  mounted () {},
  methods: {
    sendCheckCode () { // 发送验证码
      const that = this
      if (that.counting) {
        return
      }
      that.checkTelphone()
      if (that.checkPhone && that.checkPhone.length > 0) {
        return
      }
      let tel = that.telphone
      that.loadingShow = true
      that.$api.get(userCheckCode + '/' + tel, {}, () => {
        that.loadingShow = false
        modal.toast({
          message: '发送成功'
        })
        that.counts = 60
        that.counting = true
        that.timer = setInterval(() => {
          if (that.counts > 1) {
            that.counts--
          } else {
            clearInterval(that.timer)
            that.counting = false
          }
        }, 1000)
      }, () => {
        that.loadingShow = false
      })
    },
    checkTelphone () { // 验证手机号
      const that = this
      let tel = that.telphone
      if (validatenull(tel)) {
        that.checkPhone = '手机号不能为空'
        return
      }
      let res = isvalidatemobile(tel)
      if (!res.result) {
        that.checkPhone = res.msg
        return
      }
      that.checkPhone = ''
    },
    checkPassword () { // 验证密码格式
      const that = this
      let password = that.password
      if (validatenull(password)) {
        that.checkpassword = '密码不能为空'
        return
      }
      let res = validatePassword(password)
      if (!res) {
        that.checkpassword = '密码格式不正确'
        return
      }
      that.checkpassword = ''
    },
    checkValidateCode () { // 验证密码格式
      const that = this
      let code = that.checkcode
      if (validatenull(code)) {
        that.checkWord = '验证码不能为空'
        return
      }
      let length = code.length
      if (length < 4) {
        that.checkWord = '验证码格式不正确'
        return
      }
      that.checkWord = ''
    },
    handleRegister () { // 注册
      const that = this
      that.checkTelphone()
      that.checkPassword()
      that.checkValidateCode()
      let allStr = that.checkPhone + that.checkpassword + that.checkWord
      if (allStr.length > 0) {
        return
      }
      let params = {
        account: that.telphone,
        password: that.password,
        captcha: that.checkcode
      }
      that.loadingShow = true
      that.$api.post(userRegister, params, function (res) {
        let datas = {
          account: that.telphone,
          password: that.password
        }
        that.$api.post(userLogin, datas, function (result) {
          storage.setItem('userId', result.data.userId, (event) => {
            if (event.result === 'success') {
              that.loadingShow = false
              that.dialogShow = true
            }
          })
        }, () => {
          that.loadingShow = false
        })
      }, () => {
        that.loadingShow = false
      })
    },
    tStart (e) {
      this.ifPress = true
    },
    tEnd (e) {
      this.ifPress = false
    },
    changePassword (e) { // 眼睛点击事件 改变input的type
      if (this.showPassword) {
        this.passwordType = 'password'
        this.eyeSrc = 'eye_hide.png'
      } else {
        this.passwordType = 'text'
        this.eyeSrc = 'eye_show.png'
      }
      this.showPassword = !this.showPassword
    },
    jumpTo (path) { // 去入驻
      this.$router.push(path)
    },
    hideDialog () { // 关闭弹窗
      this.dialogShow = false
    }
  },
  components: {
    WxcLoading,
    IHeader,
    Tip,
    Buttons
  }
}
</script>

<style scoped>
    .flex_row {
        flex-direction: row;
    }
    .space_between {
        justify-content: space-between;
    }
    .word_left {
        text-align: left;
    }
    .form-wrapper {
        width: 606px;
        background-color: transparent;
    }
    .flex_center {
        margin-top: 160px;
        flex-direction: row;
        justify-content: center;
    }
    .tel-wrapper {
        margin-bottom: 8px;
    }
    .code {
        placeholder-color: #1e1e1e;
        font-family: medium;
    }
    .tel {
        placeholder-color: #cfcfcf;
    }
    .write {
        height: 66px;
        font-size: 30px;
        line-height: 66px;
        color: #464646;
    }
    .border-bottom {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #cecece;
    }
    .password-wrapper {
        margin-top: 40px;
        margin-bottom: 8px;
        padding-bottom: 1px;
    }
    .checkCode-wrapper {
        margin-top: 16px;
        margin-bottom: 8px;
        padding-bottom: 16px;
        align-items: center;
    }
    .getCode {
        height: 50px;
        padding-left: 16px;
        padding-right: 16px;
        line-height: 50px;
        color: #fff;
        font-size: 24px;
        background-color: #2b3040;
        border-radius: 10px;
    }
    .notPress {
        color: #a4a4a4;
        background-color: #cecece;
    }
    .submitBtn {
        height: 70px;
        margin-top: 70px;
        line-height: 70px;
        text-align: center;
        font-size: 30px;
        border-radius: 35px;
    }
    .eye {
        position: absolute;
        right: 0;
        top: 13px;
        width: 40px;
        height: 40px;
    }
    .beforePress {
        color: #fff;
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
    }
    .afterPress {
        color: #c4c4c4;
        background-image: linear-gradient(to right, #343741, #8e929d);
    }
    .register-success {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        background-color: rgba(43, 48, 64, 0.66);
    }
    .success-bg {
        position: absolute;
        top: 164px;
        left: 132px;
        width: 486px;
        height: 603px;
    }
    .success-content {
        width: 486px;
        height: 603px;
        margin-top: 164px;
    }
    .avatar-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .avatar {
        width: 260px;
        height: 124px;
    }
    .close {
        position: absolute;
        top: 80px;
        right: 24px;
        width: 28px;
        height: 28px;
    }
    .margin_top_20 {
        margin-top: 20px;
    }
    .success-tel {
        color: #a4a4a4;
        font-size: 26px;
        text-align: center;
    }
    .success-tip {
        text-align: center;
        font-size: 32px;
        color: #262626;
    }
    .success-welcome {
        color: #a4a4a4;
        font-size: 26px;
        line-height: 36px;
        text-align: center;
    }
    .btn-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .btn {
        width: 374px;
        height: 64px;
        line-height: 64px;
        font-size: 30px;
        text-align: center;
        border-radius: 10px;
    }
    .goNow {
        margin-top: 64px;
    }
    .later {
        border-width: 1px;
        border-style: solid;
        border-color: #2b3040;
        color: #2b3040;
        background-color: #fff;
    }
</style>
